<template>
  <div>
    <span class="search-condition-item-label"
          :title="attr.title ? attr.title : ''">{{ attr.title ? attr.title : '' }}</span>
    <div class="search-condition-item-widget">
      <div class="left-div">
        <a-input v-model="text"
                 class="left-input"
                 :placeholder="attr.placeholder? attr.placeholder : $i18n('org.index.select.people.label.js')">
        </a-input>
        <div class="overlay-input-div"></div>
        <span class="xicon-radio-people member-span"
              :title="$i18n('workflow.replaceNode.04')"
              @click="onMemberClick"></span>
      </div>
      <span class="xicon-waibu disable-member-span"
            :title="$i18n('workflow.replaceNode.05')"
            @click="onDisableMemberClick"></span>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      attr: {
        type: Object,
        default: () => {
          return {
            title: '',
            placeholder: '点击选人'
          };
        }
      },
      value: {
        type: Object,
        default: () => null
      }
    },
    data() {
      return {
        text: this.value
      };
    },
    watch: {
      value(newVal, oldVal) {
        this.text = newVal && newVal.text ? newVal.text : '';
      }
    },
    methods: {
      // onBlur(e) {
      //   console.log(e);
      //   if (this.text != this.value) {
      //     this.$emit('valueChange', { key: this.attr.key, value: this.text ? this.text : null });
      //   }
      // }
      onMemberClick() {
        let tempValue = this.value && this.value.value ? this.value.value : '';
        let tempText = this.value && this.value.text ? this.value.text : '';

        if (this.value && this.value.isAvailablePeople) {
          tempValue = '';
          tempText = '';
        }

        $.selectPeople({
          type: 'selectPeople',
          panels: 'Department,Team,Post,Outworker,RelatePeople',
          selectType: 'Member',
          //,Team,Post,Level,Role,Email,Mobile
          minSize: 0,
          text: $.i18n('common.default.selectPeople.value'),
          returnValueNeedType: true,
          showFlowTypeRadio: false,
          onlyLoginAccount:
            this.attr.isGroupAdmin && this.attr.isGroupAdmin === 'true' ? true : false,
          showConcurrentMember: true,
          //是否显示兼职人员(只外单位)
          params: {
            text: tempText,
            value: tempValue
          },
          targetWindow: getCtpTop(),
          callback: (res) => {
            let value = null;
            if (res && res.text) {
              value = { value: res.value, text: res.text };
            }

            this.emitValueChange(value);
          }
        });
      },
      onDisableMemberClick() {
        // let tempValue = this.value && this.value.value ? this.value.value : '';
        // let tempText = this.value && this.value.text ? this.value.text : '';
        let param = new Object();

        param['callBack'] = (result) => {
          let id = new Array();
          let name = new Array();

          for (let i = 0; i < result.length; i++) {
            const item = result[i];
            id.push(item['type'] + '|' + item['id']);
            name.push(item['name']);
          }
          let value = null;
          if (result.length) {
            value = { value: id.join(','), text: name.join(','), isAvailablePeople: true };
          }
          this.emitValueChange(value);
        };

        param['column'] = [
          {
            display: 'id',
            name: 'id',
            width: '10%',
            sortable: false,
            align: 'left',
            type: 'checkbox',
            isToggleHideShow: true
          },
          {
            display: $.i18n('collaboration.appointStepBack.memberName.js'),
            //人员名称
            name: 'name',
            width: '20%',
            sortable: true,
            align: 'left',
            isToggleHideShow: false
          },
          {
            display: $.i18n('common.workflow.dep'),
            //所属部门
            name: 'departName',
            width: '20%',
            sortable: true,
            align: 'left',
            isToggleHideShow: false
          },
          {
            display: $.i18n('common.subordinate.account.label'),
            //所属单位
            name: 'accountShortName',
            width: '20%',
            sortable: true,
            align: 'left'
          },
          {
            display: $.i18n('common.coll.state.label'),
            //状态
            name: 'status',
            width: '15%',
            sortable: true,
            align: 'left',
            isToggleHideShow: false
          }
        ];
        param['title'] = $.i18n('workflow.manager.selectUnavailablePeople.js');
        param['maxSize'] = 20;
        param['orgType'] = 'V3xOrgMember';
        param['searchLabel'] = $.i18n('workflow.manager.selectUnavailablePeople.search.js');
        selectUnavailableNodeFunction(param);
      },
      emitValueChange(value) {
        this.$emit('valueChange', { key: this.attr.key, value: value });
      }
    }
  };
</script>
<style scoped lang="scss">
  .search-condition-item-widget {
    display: flex;
    font-size: 0px;

    .left-div {
      flex: 1 1 auto;
      position: relative;
      .left-input {
        padding-right: 30px !important;
      }
      .overlay-input-div {
        position: absolute;
        opacity: 0;
        left: 0px;
        top: 0px;
        height: 100%;
        width: 100%;
      }
      .member-span {
        position: absolute;
        right: 10px;
        color: #0077ff;
        color: var(--theme-brand6, #0077ff);
        cursor: pointer;
      }
    }
    .disable-member-span {
      display: block;
      margin-left: 8px;
      flex: 0 0 auto;
      color: #0077ff;
      color: var(--theme-brand6, #0077ff);
      cursor: pointer;
    }
  }
</style>
